<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
	<head>
		<title>register</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/prototype1.6.js"></script>
		<script type="text/javascript">
			//用户名验证
			var xmlreq;
			function validateUserName(){
				//document.getElementById("msg").innerHTML = "正在检测......";
				//创建XMLHttpRequest对象
				if(window.XMLHttpRequest){
					xmlreq=new XMLHttpRequest();
				}else{
					try{
						xmlreq=new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						xmlreq=new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				var userName=document.getElementById("userName").value;
				//创建HTTP请求
				xmlreq.open("post","validateUserName.do?time="+new Date().getTime());
				xmlreq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xmlreq.onreadystatechange=execute;
				xmlreq.send("userName="+userName);
			}
			//响应处理函数
			function execute(){
				if(xmlreq.readyState==4&&xmlreq.status==200){
					var msg=xmlreq.responseText;
					document.getElementById("msg").innerHTML=msg;
				}
			}
			
			//用prototype检查验证码
			function validateValidateCode(){
       new Ajax.Request(
        "validateValidateCode.do?time="+new Date().getTime(),
                {
        method:"post",
        parameters:{"validateCode":$F("validateCodeInput")},
        onSuccess:function(req){
	        $("validateCodeErrSpan").innerHTML=req.responseText;
                    }
                }
            );
        }
		</script>
	</head>
	<body>
		<div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">Main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>

				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						注册
					</h1>
					<form action="register.do" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									用户名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="userName"
										id="userName" onblur="validateUserName()" />
									<span style="color: red" id="msg"></span>
									<span style="color: red">${userExisted}</span>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									真实姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="passWord" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									年龄:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="age" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									性别:
								</td>
								<td valign="middle" align="left">
									男
									<input type="radio" class="inputgri" name="gender" value="1" />
									女
									<input type="radio" class="inputgri" name="gender" value="0" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									电话:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="phone" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									验证码:
									<img id="validateCode" src="ValidateCodeServlet" />
									<a href="javascript:;"
										onclick="document.getElementById('validateCode').src = 'ValidateCodeServlet?'+(new Date()).getTime()">换一张</a>
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="validateCode" id="validateCodeInput" onblur="validateValidateCode()" />
									<%
												String validateCodeErr = (String) request
												.getAttribute("validateCodeErr");
									%>
									<span style="color: red" id="validateCodeErrSpan"><%=(validateCodeErr == null ? "" : validateCodeErr)%>
									</span>
								</td>
							</tr>
						</table>
						<p>
							<input type="submit" class="button" value="Submit &raquo;" />
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>
